<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>简洁的登录注册页面演示</title>
	<link href="./css/tailwind.min.css" rel="stylesheet">
	<!-- 引入样式 -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入vue -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
	<style>
		.dlbox .weixin,
		.dlbox .weibo {
			display: inline-block;
			width: 32px;
			height: 32px;
			background-size: cover;
		}
		.dlbox .weixin {
			background-image: url(images/weixin.png);
		}
		.dlbox .weibo {
			background-image: url(images/weibo.png);
		}
		.bg-indigo-100 {
			background-color: #ebf4ff;
		}
		.border-gray-200 {
			border-color: #edf2f7;
		}
		.bg-gray-100 {
			background-color: #f7fafc;
		}
		.bg-indigo-500 {
			background-color: #667eea;
		}
	</style>
</head>

<body class="min-h-screen bg-gray-100 text-gray-900 flex justify-center dlbox">
	<div id="app" class="max-w-screen-xl m-0 sm:m-20 bg-white shadow sm:rounded-lg flex justify-center flex-1">
		<div class="flex-1 bg-indigo-100 text-center hidden lg:flex">
			<div class="m-12 xl:m-16 w-full bg-contain bg-center bg-no-repeat"
				style="background-image: url('images/dlbox.svg');"></div>
		</div>
		<div class="lg:w-1/2 xl:w-5/12 p-6 sm:p-12">
			<div class="mt-12 flex flex-col items-center">
				<h1 class="text-2xl xl:text-3xl font-extrabold">用户注册</h1>
				<div class="w-full flex-1 mt-8">
<!-- 					<div class="flex flex-col items-center">
						<button
							class="w-full max-w-xs font-bold shadow-sm rounded-lg py-3 bg-indigo-100 text-gray-800 flex items-center justify-center ease-in-out focus:outline-none hover:shadow focus:shadow-sm focus:shadow-outline">
							<div class="weixin"></div>
							<span class="ml-4">使用微信登录</span>
						</button>
						<button
							class="w-full max-w-xs font-bold shadow-sm rounded-lg py-3 bg-indigo-100 text-gray-800 flex items-center justify-center ease-in-out focus:outline-none hover:shadow focus:shadow-sm focus:shadow-outline mt-5">
							<div class="weibo"></div>
							<span class="ml-4">使用微博登录</span>
						</button>
					</div> -->

	<!-- 				<div class="my-12 border-b text-center">
						<div
							class="leading-none px-2 inline-block text-sm text-gray-600 tracking-wide font-medium bg-white transform translate-y-1/2">
							或者使用电子邮箱注册</div>
					</div> -->
					<div class="mx-auto max-w-xs">
						<input
							class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white"
							type="text" placeholder="请输入手机号"
							maxlength="11" oninput = "value=value.replace(/[^\d]/g,'')"
							v-model.trim="phone"
							@blur="phonejy"
							ref="phone">
						<input
							class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white mt-5"
							type="password" placeholder="请输入密码"
							onkeyup="this.value=this.value.replace(/\s+/g,'')"
							v-model.trim="password"
							@blur="passwordjy"
							ref="password">
						<div>
							<input
							  style="width: 55%;float: left;"
								class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white mt-5"
								type="text" placeholder="请输入验证码"
								oninput = "value=value.replace(/[^\d]/g,'')"
								maxlength="4"
								v-model.trim="verification"
								@blur="verificationjy">
							<button
							  style="width: 40%; float: right;"
								class="mt-5 tracking-wide font-semibold bg-indigo-500 text-gray-100 w-full py-4 rounded-lg hover:bg-indigo-700 ease-in-out flex items-center justify-center focus:shadow-outline focus:outline-none"
								@click="sendVerification">
								<span class="ml-3" v-if="!countDownNum">发送验证码</span>
								<span class="ml-3" v-if="countDownNum">{{ countDownNum }}</span>
							</button>
						</div>
						<div style="clear: both;"></div>
						<button
							class="mt-5 tracking-wide font-semibold bg-indigo-500 text-gray-100 w-full py-4 rounded-lg hover:bg-indigo-700 ease-in-out flex items-center justify-center focus:shadow-outline focus:outline-none"
							@click="registerClick">
							<span class="ml-3">注 册</span>
						</button>
						<p class="mt-6 text-xs text-gray-600 text-center">我同意并遵守服务协议</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data: {
				phone: '',
				password: '',
				verification: '',
				phonever: false,
				passwordver: false,
				verificationver: false,
				countDownNum: 0
			},
			methods: {
				phonejy() {
					if(this.phone.length != 11){
						this.$message.error('手机号格式错误');
						this.$refs.phone.focus();
					}else {
						this.phonever = true
					}
				},
				passwordjy() {
					if(this.password.length < 12){
						this.$message.error('密码长度不够，最低12位');
						this.$refs.password.focus();
					}else {
						this.passwordver = true
					}
				},
				verificationjy() {
					if(this.verification.length < 4){
						this.$message.error('验证码长度不够');
					}else {
						this.verificationver = true
					}
				},
				// 发送验证码
				sendVerification() {
					if(this.phonever && this.passwordver) {
						if(this.countDownNum) return;
						axios.get('http://xd.wy.52chye.cn/captcha/sent',{
							params: { "phone": this.phone }
						}).then(res => {
							console.log(res.data);
							this.countDownNum = 60;
							var countDown = setInterval(() => {
								this.countDownNum = this.countDownNum - 1;
								if(this.countDownNum < 1) {
									clearInterval(countDown);
									this.countDownNum = 0;
								}
							},1000)
						})
					}else {
						this.$message.error('请输入正确的用户名或密码');
					}
				},
				registerClick() {
					if(!this.phonever || !this.passwordver || !this.verificationver) {
						return this.$message.error("请输入正确的用户名和密码");
					}
					axios.get('http://xd.wy.52chye.cn/captcha/verify',{
						params: { "captcha": this.verification, "phone": this.phone }
					}).then(res => {
						return axios.get('http://xd.wy.52chye.cn/register/cellphone',{
							params: { 
								"captcha": this.verification, 
								"phone": this.phone,
								"password": this.password,
								"nickname": Math.random().toString(36).substr(2)
							}
						})
					}).then(res => {
						console.log(res.data);
						this.$message.success("注册成功");
						setTimeout(() => {
							window.location.replace("http://xd.52chye.cn");
						},2000)
					}).catch(() => {
						this.$message.error("验证码错误");
					})
				}
			}
		})
	</script>
</body>
</html>
